<template>
  <div class="company-elite">
    <div class="company-elite-list" v-for="(item,index) in eliteList" :key="index">
      <div class="company-elite-list-left"><img :src="item.photo_url"></div>
      <div class="company-elite-list-right">
        <div class="name">{{item.realname}}</div>
        <div class="office">{{item.company_info.position}}</div>
        <div class="phone"><span>电话：{{item.phone}}</span><span class="icon" @click="call(item.phone)"></span></div>
        <div class="company-name">{{item.company_info.company_name}}</div>
      </div>
      <div class="share"></div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      eliteList:[]
    }
  },
  onShow(){
    this.reqChambersElite();
  },
  methods:{
    //拨打电话
    call(phone){
      wx.makePhoneCall({
        phoneNumber: phone
      })
    },
    // 获取商会精英列表
    async reqChambersElite(){
      let res = await this.$api.getChambersElite();
      if(res.data.level == "success"){
        let data = res.data.data;
        this.eliteList = data;
      }else{
        wx.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 1000
        })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
  .company-elite{
    .company-elite-list{
      position: relative;
      padding: 20rpx;
      margin-top: 20rpx;
      display: flex;
      border: 1px solid #18c7fc;
      border-radius: 8px;
      .company-elite-list-left{
        width: 250rpx;
        height: 180rpx;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .company-elite-list-right{
        margin-left: 14rpx;
        >div{
          height: 45rpx;
          line-height: 45rpx;
          font-size: 28rpx;
        }
        .phone{
          display: flex;
          justify-content: space-between;
          .icon{
            width: 45rpx;
            height: 45rpx;
            background-image: url(./../../../../static/images/phone.png);
            background-repeat: no-repeat;
            background-size: 45rpx 45rpx;
            background-position: center center;
            margin-left: 10rpx;
          }
        }
      }
      .share{
        position: absolute;
        right: 20rpx;
        top: 10rpx;
        width: 45rpx;
        height: 45rpx;
        background-image: url(./../../../../static/images/share.png);
        background-repeat: no-repeat;
        background-size: 45rpx 45rpx;
        background-position: center center;
      }
    }
  }
</style>